<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>
			<text>{{info.name}}</text>
			<text class="tag">{{info.code}}</text>
		</header-view>
		<view class="content">
			<view class="top flex">
				<view class="price col_center" :class="info.gain>0?'green':'red'">
					<view class="price_detail">{{info.price}}</view>
					<view class="price_status" :class="info.gain>0?'bg_green':'bg_red'">
						<text>{{info.gainvalue}}</text>
						<text>{{info.gain}}%</text>
					</view>
				</view>
				<view class="list flex_between">
					<view class="item flex_between">
						<text class="name">{{$t('开盘价')}}</text><text>{{info.open}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('闭盘价')}}</text><text>{{info.preClose}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('高')}}</text><text>{{info.high}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('低')}}</text><text>{{info.low}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('总量')}}</text><text>{{info.amount}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('总额')}}</text><text>{{info.volume}}</text>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="list_item flex">
					<view class="title flex_center">{{$t('账户余额')}}</view>
					<view class="value">{{info.balance}}</view>
				</view>
				<view class="list_item flex">
					<view class="title flex_center">{{$t('手续费')}}</view>
					<view class="value">{{getService}}</view>
				</view>
				<view class="list_item flex">
					<view class="title flex_center">{{$t('定价')}}</view>
					<view class="flex">
						<view class="value_item" :class="activeTab==1?'active_item':''" @tap="changeTab(1)">{{$t('限价')}}</view>
						<view class="value_item" :class="activeTab==2?'active_item':''" @tap="changeTab(2)">{{$t('市价')}}</view>
					</view>
				</view>
				<view class="list_item flex">
					<view class="title flex_center">{{$t('开盘价')}}</view>
					<view class="input_box flex" v-if="activeTab==1">
						<u--input border="none" v-model="price" type="number" color="#fff" maxlength="9"></u--input>
					</view>
					<view class="item2" v-if="activeTab==2">{{info.price}}</view>
				</view>
				<view class="list_item flex">
					<view class="title flex_center">{{$t('已开仓位')}}</view>
					<view class="item flex">
						<view class="input_box flex" style="width: auto;flex: 1;">
							<u--input border="none" v-model="amount" type="number" color="#fff" maxlength="9">
								<template slot="suffix">
									<view style="color: rgba(236,231,227,.6);">price</view>
								</template>
							</u--input>
						</view>
						<view class="tips">
							1 price = {{setting.zhang_to_stocknum}}{{$t('股')}}
						</view>
					</view>
				</view>
				<view class="list_item flex">
					<view class="title flex_center">{{$t('类型')}}</view>
					<view class="flex">
						<view class="value_item" :class="activeType=='long'?'active_item':''" @tap="changeType('long')">
							{{$t('买多')}}</view>
						<view class="value_item" :class="activeType=='short'?'active_item':''"
							@tap="changeType('short')">{{$t('买空')}}</view>
					</view>
				</view>
				<view class="total flex">
					<view class="total_item col_center">
						<view class="total_price">{{getPrice}}</view>
						<view class="total_name">{{$t('市价')}}</view>
					</view>
					<text class="modify">+</text>
					<view class="total_item col_center">
						<view class="total_price">{{getService}}</view>
						<view class="total_name">{{$t('手续费')}}</view>
					</view>
					<text class="modify">=</text>
					<view class="total_item col_center">
						<view class="total_price">{{(Number(getPrice)+Number(getService)).toFixed(2)}}</view>
						<view class="total_name">{{$t('总价')}}</view>
					</view>
				</view>
				<u-button class="submit" :text="$t('买入仓位')" @tap="openMask"></u-button>
				<view class="all_tips">
					{{$t('温馨提示：开仓买入的价格仅为参考价格。由于网络延迟，买入价格可能会略有波动。实际买入价格将以您开仓时的实时价格为准')}}。
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom">
			<view class="mask">
				<view class="mask_title flex_center">
					<text>{{info.name}}</text>/<text>{{info.code}}</text>
				</view>
				<view class="mask_list">
					<view class="mask_item flex_between">
						<view class="name">{{$t('委托价格')}}</view>
						<view class="data">{{activeTab==1?price:info.price}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('委托数量')}}</view>
						<view class="data">{{amount}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('杠杆')}}</view>
						<view class="data">{{setting.zhang_to_stocknum}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('总额')}}</view>
						<view class="data">{{getPrice}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('市场价')}}</view>
						<view class="data">{{(info.price*amount).toFixed(2)}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('手续费')}}</view>
						<view class="data">{{getService}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('总计')}}</view>
						<view class="data">{{(Number(getPrice)+Number(getService)).toFixed(2)}}</view>
					</view>
					<view class="mask_item flex_between">
						<view class="name">{{$t('可用金额')}}</view>
						<view class="data">{{(info.balance)}}</view>
					</view>
				</view>
				<u-button class="submit" :text="$t('提交')" @tap="submit"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		stockDetailApi,
		getSettingApi,
		addOrderApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				activeTab: 1,
				price: 21.70,
				amount: 1,
				activeType: "long",
				show: false,
				info: {},
				userinfo: {},
				setting: {}
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetail()
			this.getSetting()
			/*
			long 买多
			short 买空
			*/
			this.activeType = opt.type
		},
		computed: {
			getPrice() {
				let total = 0
				let price = 0
				if (this.activeTab == 1) {
					if (this.price != 0 && this.price != '') {
						price = this.price
					} else {
						price = this.info.price
					}
				} else {
					price = this.info.price
				}
				return (price * this.amount).toFixed(2)
			},
			getService() {
				let service = 0
				let price = 0
				if (this.activeTab == 1) {
					if (this.price != 0 && this.price != '') {
						price = this.price
					} else {
						price = this.info.price
					}
				} else {
					price = this.info.price
				}
				service = price * this.amount * this.setting.zhang_to_stocknum * this.info.buy_charge
				return service.toFixed(2)
			}
		},
		methods: {
			getSetting() {
				getSettingApi().then(res => {
					// console.log(res.data.data)
					this.setting = res.data.data
				})
			},
			// getUserinfo() {
			// 	userInfoApi().then(res => {
			// 		this.userinfo = res.data.data
			// 		uni.setStorageSync('userinfo', res.data.data)
			// 	})
			// },
			getDetail() {
				stockDetailApi({
					id: this.id
				}).then(res => {
					// console.log(res.data.data)
					this.info = res.data.data
					this.price = this.info.price
				})
			},
			changeTab(key) {
				if (this.activeTab == key) {
					return
				}
				this.activeTab = key
			},
			changeType(key) {
				if (this.activeType == key) {
					return
				}
				this.activeType = key
			},
			openMask() {
				if (this.activeTab == 1) {
					if (this.price == 0 || this.price == "") {
						uni.$u.toast(this.$t('委托价格不能为空'))
						return
					}
				}
				this.show = true
			},
			submit() {
				let data = {}
				if (this.activeType == "long") {
					data.type = 1
				} else if (this.activeType == "short") {
					data.type = 2
				}
				data.pro_id = this.id
				data.price_type = this.activeTab == 1 ? 0 : 1
				data.buyprice = this.price
				data.buy_zhang = this.amount
				addOrderApi(data).then(res => {
					console.log(res.data)
					uni.$u.toast(res.data.msg)
					this.show = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 0;

		.tag {
			height: 32rpx;
			background: #c62f1f;
			padding: 0 5rpx;
			font-size: 14px;
			font-weight: 400;
			color: #fff;
			margin-left: 8rpx;
			border-radius: 4rpx;
		}

		.content {
			flex: 1;
			overflow: auto;
			padding-bottom: 130rpx;

			.top {
				height: 250rpx;
				border-bottom: 2rpx solid #151630;
				border-top: 2rpx solid #151630;
				padding: 0 24rpx;

				.price {
					width: 270rpx;
					height: 100%;
					margin-right: 26rpx;

					.price_detail {
						font-size: 60rpx;
						font-weight: 700;
					}

					.price_status {
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						margin-top: 14rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #fff;

						uni-text {
							padding: 0 20rpx;
						}
					}
				}

				.list {
					flex: 1;
					flex-wrap: wrap;

					.item {
						width: 48%;
						font-size: 24rpx;
						font-weight: 400;
						color: #fff;

						height: 32px;

						.name {
							color: #999;
							padding-right: 20rpx;
						}
					}
				}
			}

			.main {
				padding: 0 24rpx;

				.list_item {
					margin-top: 30rpx;

					.title {
						width: 180rpx;
						height: 74rpx;
						background: #1f2039;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #e6e6e6;
						margin-right: 13px;
						flex-shrink: 0;
					}

					.value {
						height: 74rpx;
						background: #1f2039;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #ffaa65;
						padding: 0 32rpx;
						text-align: center;
						line-height: 74rpx;
					}

					.value_item {
						height: 74rpx;
						background: #1f2039;
						padding: 0 14rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(236, 231, 227, .6);
						line-height: 74rpx;
					}

					.active_item {
						background: rgba(76, 61, 137, .35);
						color: #ece7e3;
					}

					.item2 {
						// width: 74rpx;
						height: 74rpx;
						background: #2a4160;
						font-size: 30rpx;
						font-weight: 400;
						color: #fff;
						margin-left: 2rpx;
						text-align: center;
						line-height: 74rpx;
						padding: 0 20rpx;
					}

					.input_box {
						padding: 0 20rpx;
						height: 74rpx;
						width: 100px;
						background-color: #1f2039;
					}

					.item {
						.tips {
							width: 100px;
							height: 74rpx;
							line-height: 74rpx;
							text-align: center;
							background: #1f2039;
							border-radius: 4rpx;
							margin-left: 8rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(236, 231, 227, .6);
						}
					}

				}

				.total {
					margin-top: 100rpx;

					.total_item {
						flex: 1;
						height: 100rpx;
						background: #1f2039;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: hsla(0, 0%, 90.2%, .6);
						box-sizing: border-box;
						padding: 0 20rpx;

						.total_price {
							font-size: 28rpx;
							font-weight: 400;
							color: #ffaa65;
							margin-bottom: 4rpx;
						}
					}

					.modify {
						font-size: 28rpx;
						font-weight: 400;
						color: #fff;
						padding: 0 16rpx;
					}
				}

				.all_tips {
					margin-top: 60rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: hsla(0, 0%, 100%, .6);
					line-height: 34rpx;
				}
			}
		}

		.mask {
			background: #191f27;
			padding: 0 24rpx 30rpx;

			.mask_title {
				height: 120rpx;
				border-bottom: 1rpx solid #000;
				font-size: 30rpx;
				font-weight: 600;
				color: #fff;
			}

			.mask_item {
				height: 90rpx;
				border-bottom: 1rpx solid #000;
				margin: 0 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #fff;
			}

			.submit {
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.submit {
		height: 88rpx;
		background: #4c3d89;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
		margin-top: 88rpx;
		border: none;
	}
</style>